<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<head>
    <style>
        #_canvas {
            z-index: 2000;
            /* position:absolute; */
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* background-color: #f0f0f0; */
        }

        #_canvas2 {
            z-index: -1001;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            /* background-color: #f0f0f0; */
        }

        #_canvas3 {
            z-index: 2100;
            position: absolute;
            left: 0;
            top: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f0f0;
            display: none;
        }

        #right #left {
            float: left;
        }
    </style>
    <script type="text/javascript" src="engine.js"></script>
    <script type="text/javascript" src="examples/editor.js"></script> 
</head>

<body onload="">
    <div>
        <div id="left">
            <canvas id="_canvas" width='1200' height='700'></canvas>
            <canvas id="_canvas2" width='1000' height='700'></canvas>
            <canvas id="_canvas3" width='300' height='300'></canvas>
        </div>
    </div>
</body>
<script type="application/javascript">

    function fullsize() {
        let canvas = document.getElementById('_canvas');
        canvas.setAttribute("width", window.innerWidth);
        canvas.setAttribute("height", window.innerHeight);
    }

    // 监听画面变化，更新渲染画面
    window.addEventListener("resize", () => {
        fullsize();
    });
    editor();
</script>

</html>